<template>
    <div class='content'>
        <heading grade='1'>授权功能</heading>
        <ul class='clearfix auth'>
            <li v-for='item in list' :key="item.id">
              <router-link :to="item.serviceUrl">
                <div @click="handleChangeRoute($event,item.serviceName)">
                <el-badge :value="item.serviceCode.includes('8993')?message_organize_unread.data:''" class="item" ><x-img v-bind:src='item.iconUrl' width='90' height='90'/></el-badge>
                <p>{{item.serviceName}}</p>
                </div>
              </router-link>
            </li>
        </ul>
    </div>
</template>
<script>
  import { mapGetters } from 'vuex'
  import authorizeApi from 'api/authorize'
  export default {
    components: {},
    computed: {
      ...mapGetters({
        message_organize_unread: 'message_organize_unread'
      })
    },
    data () {
      return {
        list: []
      }
    },
    watch: {
      '$route' () {
        // 对路由变化作出响应
        this.getAuthorizeList()
      }
    },
    created () {
      this.getAuthorizeList()
    },
    methods: {
      getAuthorizeList () {
        authorizeApi.accpServiceList({
        }).then((res) => {
          for (let i = 0; i < res.data.length; i++) {
            this.list = res.data
          }
          if (this.list && this.list.length) {
            this.list.map(item => {
              if (item.serviceCode === '8993') {
                this.$store.dispatch('message_organize_unread')
              }
            })
          }
        }).catch((ERR) => {
          return false
        })
      },
      handleChangeRoute (event, code) {
        localStorage.setItem('auth_orgId', this.$route.params.org)
        if (code === '我的订单') {
          event.stopPropagation()
          event.preventDefault()
          this.$router.push({
            path: '/order',
            query: {
              statusList: '2,4',
              beginCreateDate: new Date().getTime() - 3600 * 1000 * 24 * 30,
              endCreateDate: new Date().getTime(),
              vendorUserId: localStorage.getItem('auth_orgId')
            }
          })
        }
      }
    }
  }
</script>
<style scoped>
.auth li {
  float: left;
  margin:25px 90px 25px 0;
  text-align: center;
  width: 90px;
  cursor: pointer;
}

.auth li img {
  margin-bottom: 20px;
}

.auth li:nth-child(5n+0) {
  margin-right: 0;
}

.auth li:hover p {
  color: #269974;
}
</style>
